<template>
  <!-- 浮动按钮 -->
  <div class="ai-helper-floating">
    <n-float-button 
      type="primary"
      @click="showModal = true"
      class="ai-helper-btn"
    >
      <template #icon>
        <n-icon>
          <RocketOutline />
        </n-icon>
      </template>
    </n-float-button>
  </div>

  <!-- AI助手模态框 -->
  <n-modal v-model:show="showModal" transform-origin="center">
    <n-card
      style="width: 600px"
      title="AI拓扑设计助手"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header-extra>
        <n-button quaternary circle @click="showModal = false">
          <template #icon>
            <n-icon><CloseOutline /></n-icon>
          </template>
        </n-button>
      </template>

      <n-form>
        <n-form-item label="设计需求描述">
          <n-input
            v-model:value="userInput"
            type="textarea"
            placeholder="请描述您的电缆布线需求，例如：我需要设计一个飞机通信系统的电缆布线，包含VHF电台、卫星通信和音频面板..."
            :rows="4"
            :disabled="loading"
          />
        </n-form-item>
        
        <n-alert type="info" title="设计提示">
          请详细描述：系统功能、设备类型、连接关系、特殊要求等
        </n-alert>
      </n-form>

      <template #footer>
        <n-space justify="end">
          <n-button @click="showModal = false" :disabled="loading">
            取消
          </n-button>
          <n-button
            type="primary" 
            @click="generateTopology" 
            :loading="loading"
            :disabled="!userInput.trim()"
          >
            {{ loading ? 'AI设计中...' : '生成拓扑图' }}
          </n-button>
        </n-space>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useMessage } from 'naive-ui'
import { NFloatButton, NModal, NCard, NButton, NIcon, NForm, NFormItem, NInput, NAlert, NSpace } from 'naive-ui'
import { RocketOutline, CloseOutline } from '@vicons/ionicons5'
import { flowAPI } from '@/utils/api.js'
import { nodeTemplates } from '@/utils/nodeTemplates.js'


const message = useMessage()
const emit = defineEmits(['topology-generated'])

const showModal = ref(false)
const userInput = ref('')
const loading = ref(false)


// 获取当前应用的Agent
const getCurrentAgent = () => {
  const savedAgent = localStorage.getItem('globalAgent')
  return savedAgent ? JSON.parse(savedAgent) : null
}

// 构建系统提示词，包含所有可用组件
const buildSystemPrompt = () => {
  const currentAgent = getCurrentAgent()
  const basePrompt = currentAgent?.systemPrompt || '你是一个专业的飞机电缆系统工程师。'
  
  // 获取所有可用组件
  const availableComponents = Object.values(nodeTemplates).map(node => 
    `${node.name} (${node.type}): ${node.description}`
  ).join('\n')
  
  return `${basePrompt}

可用组件清单：
${availableComponents}

请根据用户需求生成飞机电缆系统的拓扑设计方案。输出必须是严格的JSON格式，包含nodes和edges数组。

节点格式要求：
{
  "id": "唯一标识",
  "type": "节点类型(对应nodeTemplates中的type)",
  "position": {"x": 数字, "y": 数字},
  "data": {
    "label": "显示名称",
    "type": "节点类型",
    "specifications": {相关规格}
  }
}

边格式要求：
{
  "id": "唯一标识",
  "source": "源节点ID",
  "target": "目标节点ID",
  "label": "连接类型(电源/数据/信号)",
  "type": "smoothstep"
}

布局要求：
- 电源系统放在左侧
- 数据总线放在中部
- 终端设备放在右侧
- 保持合理的间距
- 考虑信号流向
`
}

// 生成拓扑图
const generateTopology = async () => {
  if (!userInput.value.trim()) {
    message.warning('请输入设计需求')
    return
  }

  const currentAgent = getCurrentAgent()
  if (!currentAgent) {
    message.warning('请先在AI Agent管理中设置并应用一个Agent')
    return
  }

  loading.value = true

  try {
    // 构建对话消息
    const messages = [
      {
        role: 'system',
        content: buildSystemPrompt()
      },
      {
        role: 'user',
        content: `设计需求：${userInput.value}

请生成符合航空电缆布线标准的拓扑设计方案，输出必须是纯JSON格式，不要包含其他文本。`
      }
    ]

    const response = await flowAPI.chatCompletions(
      currentAgent.apiConfig.apiKey,
      {
        model: currentAgent.baseModel,
        messages: messages,
        temperature: currentAgent.temperature,
        max_tokens: 2000,
        baseURL: currentAgent.apiConfig.baseURL
      }
    )

    console.log('AI原始响应:', response)

    // 解析JSON响应
    let topologyData
    try {
      const jsonMatch = response.match(/\{[\s\S]*\}/)
      if (jsonMatch) {
        topologyData = JSON.parse(jsonMatch[0])
      } else {
        topologyData = JSON.parse(response)
      }
    } catch (parseError) {
      console.error('JSON解析错误:', parseError)
      message.error('AI返回的数据格式不正确，请重试')
      return
    }

    // 增强数据验证
    if (!topologyData.nodes || !topologyData.edges) {
      message.error('生成的数据缺少节点或边信息')
      return
    }

    // 验证节点数据
    const validNodes = topologyData.nodes.filter(node => 
      node && node.id && node.position && node.data
    )
    
    if (validNodes.length === 0) {
      message.error('没有有效的节点数据')
      return
    }

    // 获取所有有效节点的ID
    const validNodeIds = validNodes.map(node => node.id)

    // 验证边数据 - 确保source和target都存在
    const validEdges = topologyData.edges.filter(edge => 
      edge && 
      edge.id && 
      edge.source && 
      edge.target &&
      validNodeIds.includes(edge.source) &&
      validNodeIds.includes(edge.target)
    )

    console.log('验证后的数据:', {
      原始节点数: topologyData.nodes.length,
      有效节点数: validNodes.length,
      原始边数: topologyData.edges.length,
      有效边数: validEdges.length
    })

    // 转换节点格式
    const convertedNodes = validNodes.map(node => {
      const nodeTemplate = nodeTemplates[node.type]
      return {
        id: node.id,
        type: 'default',
        position: node.position,
        data: {
          label: node.data?.label || nodeTemplate?.name || node.type,
          type: node.type,
          specifications: node.data?.specifications || nodeTemplate?.defaultData?.specifications || {}
        },
        style: {
          border: `2px solid ${nodeTemplate?.color || '#666'}`,
          borderRadius: '6px',
          background: 'white',
          padding: '8px',
          width: '80px',
          height: '70px',
          fontSize: '12px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
        }
      }
    })

    // 转换边格式
    const convertedEdges = validEdges.map(edge => ({
      id: edge.id,
      source: edge.source,
      target: edge.target,
      label: edge.label || `${edge.source}→${edge.target}`,
      type: 'smoothstep',
      style: { 
        stroke: '#666',
        strokeWidth: 2
      },
      labelStyle: {
        fontSize: 10,
        fill: '#333'
      }
    }))

    const finalTopology = {
      nodes: convertedNodes,
      edges: convertedEdges
    }

    console.log('最终拓扑数据:', finalTopology)

    // 发送给父组件
    emit('topology-generated', finalTopology)
    message.success(`拓扑图生成成功！包含 ${convertedNodes.length} 个节点和 ${convertedEdges.length} 条连接`)
    showModal.value = false
    userInput.value = ''

  } catch (error) {
    console.error('生成拓扑图错误:', error)
    message.error(`生成失败: ${error.message}`)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.ai-helper-floating {
  position: fixed;
  bottom: 80px;  /* 调整位置避免被其他元素遮挡 */
  right: 32px;
  z-index: 9999;
}

.ai-helper-btn {
  width: 60px;
  height: 60px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 确保按钮可见 */
:deep(.ai-helper-btn .n-button) {
  background-color: #18a058 !important;
  border-color: #18a058 !important;
}

:deep(.ai-helper-btn .n-button__icon) {
  font-size: 24px;
}
</style>